import React, {Component} from 'react'
import {
    Input, List,  Select, Button, Divider, Modal, Layout,
    InputNumber,
} from 'antd';
import ResultTable4 from "../resultTable/ResultTable4";
import '../../component/pro_caseSearch/Pro_Case_search.css';
import ReactToPrint from 'react-to-print';
import axios from 'axios';
import PdfPreview from "../../article/components/PdfPreview";
import {URL} from '../../constant/Constant';
import {countryData, provinceData} from "./constants";
import {
    SearchWapper,
    SearchName,
    SearchBox,
    ListInfo,
    ListInfoPDF,
    ListInfoPDFButton
} from './DataSearStyle';


const {Header} = Layout;


//企业名称选择框初始化
const Option = Select.Option;



/**
 * 课题组4 协同消耗数据
 * @autuhor zm
 */
class ResearchGroup4 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            provinceValue: '',//省市
            sheJiCNValue_min: -1,
            sheJiCNValue_max: 1000,//设计产能
            keyWord: '',//关键字
            qiYeMCValue: '',//企业名字
            country: '中国',
            pdfData: [],
            pageData:1,
            pageDataPDF:1,
            pageSizeData:5,
            province: '',
            countryData1: countryData,
            provinceData1: provinceData[countryData[0]],
            exeData: [],
            visible: false,
            visiblePDF: false,
            baseData: [],//基本信息表
            resultData: [],//资源数据表
            PDF_path: ''//pdf
        }
    }


    handleProvinceChange = value => {
        this.setState({
            province: provinceData[this.state.country][value],

        });
    };
    handleCountryChange = value => {
        this.setState({
            country: value,
            provinceData1: provinceData[value],
            province: provinceData[value][0]
        });
    };


    //企业名称方法
    onChangeQiYeMC = (e) => {
        this.setState({
            qiYeMCValue: e.target.value
        });
    }


    onChangeKeyWord = (e) => {
        this.setState({
            keyWord: e.target.value,
        });
    };


    //查询按钮方法
    handleSearchInfo = () => {


        const provinceValue = this.state.province;
        const qiYeMCValue = this.state.qiYeMCValue;
        //获取可比熟料热耗
        const country = this.state.country;
        const keyWord = this.state.keyWord;
        //获取排放状况
        let formData = new FormData();
        formData.append('country', country);
        formData.append('enterpriseName', qiYeMCValue);
        formData.append('province', provinceValue);
        formData.append('keyWords', keyWord);

        axios({
            method: 'post',
            url: URL.urlRoot + URL.Group4Search,
            data: formData,
            headers: {
                "Content-Type": "application/json",
                'Authorization': window.localStorage.authorization,
            }
        })
            .then((res) => {
                console.log(res);
                this.setState({
                    exeData: res.data.data.researchGroup4s,
                    pdfData: res.data.data.documents
                }, () => {
                    console.log("this.state.exeData")
                    console.log(this.state.exeData)
                    console.log("this.state.exeData")
                })
            })
            .catch(err => {
                console.log('失败')
            })

    }

    // 初始化
    componentDidMount = () => {
        axios.get(URL.urlRoot+URL.allGroupData4,{
            headers: {
                "Content-Type": "application/json",
                'Authorization': window.localStorage.authorization,
            }
        })
        //axios.get("/api/group1.json")
            .then((res) => {
                console.log("测试res");
                console.log(res.data.data);
                console.log("测试res");
                const tempData = res.data.data.researchGroup4s;
                const tempPDFData = res.data.data.documents;
                this.setState({
                    exeData: tempData,
                    pdfData:tempPDFData,
                })
            })
    }
    //查看按钮
    showModal = (i) => {
        const item = this.state.exeData[i];
        // console.log('showmodal')
        // console.log(i)
        // console.log(item)
        // console.log('showmodal')
        this.setState({
            visible: true,
            resultData: item,
        })
    }
    showModalPDF = (i) => {
        const item = this.state.pdfData[i];
        this.setState({
            visiblePDF:true,
            PDF_path: item.downloadPath,
        })
    }
    //控制modal的显示与隐藏
    handleOk = () => {
        this.setState({
            visible: false,
        })
    }
    handleCancel = () => {
        this.setState({
            visible: false,
        })
    }
    handleOkPDF = () => {
        this.setState({
            visiblePDF: true,
        })
    }
    handleCancelPDF = () => {
        this.setState({
            visiblePDF: false,
        })
    }
    render() {
        // 企业区域
        // 表头
        const {countryData1, provinceData1,} = this.state;
        const column = [
            {
                title1:'企业名称',
                title2: '省',
                title3: ' ',
                title4: '操作'
            }
        ];
        const columnPDF = [
            {
                title1: '标题',
                title2: '作者',
                title3: '操作'
            }
        ];

        console.log("path")
        console.log(this.state.PDF_path)
        console.log("path")
        return (
            <div
                className='pro_case_search'
                style={{padding: 24, background: '#fff', height: '100%'}}
            >
                <Header style={{background: '#fff', padding: 0}}>
                    <div style={{float: 'left'}}>
                        <a href='/'>
                            <img src={require("../../img/logo-whut.png")}/>
                        </a>
                    </div>
                </Header>
                <Divider orientation="left">查询条件</Divider>
                <SearchWapper>
                    <SearchName>
                        国家:
                    </SearchName>
                    <Select
                        defaultValue={countryData1[0]}
                        className='SearchWapper searchbox'
                        onChange={this.handleCountryChange}>
                        {countryData1.map(country => (
                            <Option key={country}>{country}</Option>
                        ))}
                    </Select>
                    <br/>
                </SearchWapper>
                <SearchWapper>
                    <SearchName>
                        省：
                    </SearchName>
                    <Select
                        defaultValue={this.state.provinceData1[0]}
                        className='SearchWapper searchbox'
                        onChange={this.handleProvinceChange}
                    >
                        {provinceData1.map((province, id) => (
                            <Option key={id}>{province}</Option>
                        ))}

                    </Select>
                </SearchWapper>
                <SearchWapper>
                    <SearchName>
                        企业名称：
                    </SearchName>
                    <SearchBox>
                        <Input
                            className="SearchBox searchbox"
                            value={this.state.qiYeMCValue}
                            onChange={this.onChangeQiYeMC}
                        />
                    </SearchBox>
                </SearchWapper>
                <SearchWapper>
                    <SearchName>
                        关键字:
                    </SearchName>
                    <SearchBox>
                        <Input
                            type='primary'
                            placeholder={"可以输入标题或者是关键字"}
                            className='SearchWapper searchbox'
                            value={this.state.keyWord} onChange={this.onChangeKeyWord}/>
                    </SearchBox>
                </SearchWapper>



                <Divider orientation="right">
                    <Button
                        type="primary"
                        onClick={this.handleSearchInfo}
                    >查询
                    </Button>
                </Divider>
                <List
                    dataSource={column}
                    renderItem={item => (
                        <List.Item>
                            <ListInfo>{item.title1}</ListInfo>
                            <ListInfo>{item.title2}</ListInfo>
                            <ListInfo>{item.title3}</ListInfo>
                            <ListInfo>{item.title4}</ListInfo>
                        </List.Item>
                    )}
                />
                <List
                    pagination={{
                        onChange: (page,pageSize) => {
                            this.setState({
                                pageData:page
                            })
                        },
                        pageSize: 5,
                    }}
                    dataSource={this.state.exeData}
                    renderItem={(item,index) => (
                        <List.Item>
                            <ListInfo>{item.enterpriseName}</ListInfo>
                            <ListInfo>{item.province}</ListInfo>
                            <ListInfo>{''}</ListInfo>
                            <ListInfo>
                                <Button type="primary"  onClick={() => this.showModal((this.state.pageData-1)*(this.state.pageSizeData)+index)}>
                                    查看
                                </Button>
                            </ListInfo>


                        </List.Item>
                    )}
                />
                <label><b>当前查询总数:{this.state.exeData.length}</b></label>
                {/****************************************************************************************/}
                {/*PDF的列表*/}
                {/*<List*/}
                {/*    dataSource={columnPDF}*/}
                {/*    renderItem={item => (*/}
                {/*        <List.Item>*/}
                {/*            <ListInfoPDF>{item.title1}</ListInfoPDF>*/}
                {/*            <ListInfoPDF>{item.title2}</ListInfoPDF>*/}
                {/*            <ListInfoPDFButton>{item.title3}</ListInfoPDFButton>*/}
                {/*        </List.Item>*/}
                {/*    )}*/}
                {/*/>*/}
                {/*<List*/}
                {/*    pagination={{*/}
                {/*        onChange: (page,pageSize) => {*/}
                {/*            console.log(page,pageSize);*/}
                {/*            this.setState({*/}
                {/*                pageDataPDF:page*/}
                {/*            })*/}
                {/*        },*/}
                {/*        pageSize: 5,*/}
                {/*    }}*/}
                {/*    dataSource={this.state.pdfData}*/}
                {/*    renderItem={(item,index) => (*/}
                {/*        <List.Item>*/}
                {/*            <ListInfoPDF>{item.title}</ListInfoPDF>*/}
                {/*            <ListInfoPDF>{item.author}</ListInfoPDF>*/}
                {/*            <ListInfoPDFButton>*/}
                {/*                <Button type="primary"  onClick={() => this.showModalPDF((this.state.pageDataPDF-1)*(this.state.pageSizeData)+index)}>*/}
                {/*                    查看*/}
                {/*                </Button>*/}
                {/*            </ListInfoPDFButton>*/}


                {/*        </List.Item>*/}
                {/*    )}*/}
                {/*/>*/}
                <Modal
                    title="问卷信息"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    width='100%'
                    height='100%'
                >
                    <ResultTable4 group1Data={this.state.resultData}/>
                    <ReactToPrint
                        trigger={() => <a href="#"><Button type='primary' style={{marginTop: 10}}>打印</Button></a>}
                        content={() => this.refs}
                    />

                </Modal>
                {/*****************************pdf*****************************/}
                {/*<Modal*/}
                {/*    title="pdf"*/}
                {/*    visible={this.state.visiblePDF}*/}
                {/*    onOk={this.handleOkPDF}*/}
                {/*    onCancel={this.handleCancelPDF}*/}
                {/*    width='100%'*/}
                {/*    height='100%'*/}
                {/*    cancelText='返回'*/}
                {/*    okText='获取'*/}
                {/*>*/}
                {/*    <PdfPreview*/}
                {/*        path={this.state.PDF_path}*/}
                {/*    />*/}

                {/*</Modal>*/}
            </div>

        );
    }
}

export default ResearchGroup4;